<template>
  <div class="subpage">
    <my-head
      :title="$route.query.city ? '选择城市—' + $route.query.city : '选择城市'"
      :back="true"
    ></my-head>
    <div class="search">
      <van-search
        v-model="keyword"
        show-action
        placeholder="输入城市名或者拼音"
        @search="onSearch"
        @cancel="onCancel"
        @input="onSearch"
      />
    </div>
    <div v-if="flag">
      <div class="hot">
        <p class="title">热门城市</p>
        <div class="hot-list">
          <div
            class="hot-item"
            @click="changeCityItem(l)"
            v-for="(l, i) in hotlist"
            :key="i"
          >
            {{ l.name }}
          </div>
        </div>
      </div>
      <van-index-bar>
        <div v-for="(l, i) in pylist" :key="i">
          <van-index-anchor :index="l" />
          <van-cell
            v-for="(item, index) in cityList.filter(
              (v) => v.pinyin.indexOf(l.toLowerCase()) == 0
            )"
            @click="changeCityItem(item)"
            :key="index"
            :title="item.name"
          ></van-cell>
        </div>
      </van-index-bar>
    </div>
    <div v-else>
      <van-cell-group v-if="searchList.length > 0">
        <template> </template>
        <van-cell
          v-for="(item, index) in searchList"
          :key="index"
          :title="item.name"
          @click="changeCityItem(item)"
        >
        </van-cell>
      </van-cell-group>
      <div class="list-empty" v-else>
        <img
          src=""
          alt=""
        />
        <p>没有找到匹配城市</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      searchList: [],
      keyword: "",
      hotlist: [],
      pylist: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        // "U",
        // "V",
        "W",
        "X",
        "Y",
        "Z",
      ],
    };
  },
  methods: {
    onSearch(value) {
      console.log(value);
      // 过滤
      this.flag = false;
      this.searchList = this.cityList.filter(
        (item) =>
          item.name.indexOf(value) > -1 || item.pinyin.indexOf(value) > -1
      );
    },
    onCancel() {
      this.flag = true;
      this.searchList = [];
    },
    changeCityItem(city) {
      this.changeCity(city);
      this.$router.go(-1);
    },
  },
  beforeRouteLeave(to, from, next) {
    if (this.city) {
      next();
    } else {
      this.$toast("请选择城市后在离开");
      next(false);
    }
  },
  created() {
    if (!this.cityList.length > 0) {
      // 数据不存在才请求
      this.$ajax
        .getMaiData(
          {
            k: 5398252,
          },
          {
            "x-Host": "mall.film-ticket.city.list",
          }
        )
        .then((res) => {
          this.hotlist = res.data.cities.filter(
            (item) =>
              item.pinyin == "wuhan" ||
              item.pinyin == "beijing" ||
              item.pinyin == "shanghai" ||
              item.pinyin == "shenzhen"
          );
          this.changeCityList(res.data.cities);
        });
    } else {
      this.hotlist = this.cityList.filter(
        (item) =>
          item.pinyin == "wuhan" ||
          item.pinyin == "beijing" ||
          item.pinyin == "shanghai" ||
          item.pinyin == "shenzhen"
      );
    }
  },
};
</script>

<style lang="scss" scoped>
.hot {
  padding: 10px;
  .title {
    font-size: 13px;
    color: #797d82;
    margin-bottom: 10px;
    margin-left: 8px;
  }
  .hot-list {
    display: flex;
    flex-wrap: wrap;
    .hot-item {
      height: 30px;
      background-color: #f4f4f4;
      line-height: 30px;
      border-radius: 3px;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      margin: 10px 8px 0 8px;
      font-size: 14px;
      color: #191a1b;
      width: 25%;
      text-align: center;
    }
  }
}
.list-empty {
  margin: 80px auto;
  width: 100%;
  img {
    width: 90px;
    height: 90px;
    margin: 20px auto;
  }
  p {
    color: #bdc0c5;
    font-size: 14px;
    margin: 0;
    text-align: center;
  }
}
</style>